<template>
  <div>
    <template v-for="(item,index) in props.list" :key="item.id">
      <el-menu-item :index="item.id" v-if="item.type===2" class=""
                    style="border-radius: 5px" @click="handleClick(item)">
        <div class="circle" v-if="item.level===1"></div>
        <span class="font-18 text-hidden-one ml-4 menuTitle" :title="item.name">{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu :index="item.id" v-if="item.type===1" class="hasChild " style="border-radius: 5px">
        <template #title>
          <div class="circle"></div>
          <span class="font-18 text-hidden-one ml-4 menuTitle" :title="item.name">{{ item.name }}</span>
        </template>
        <rpright-menu-item :list="item.children" @handleClick="handleClick"></rpright-menu-item>
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup lang="ts">
//组件

//接口


//api
import {nextTick, reactive, ref, onMounted} from 'vue'
import {RouteRecordRaw} from "vue-router";
import useSystemStore from "@/store/modules/system/system";
import useReportStore from "@/store/modules/report/report";
import {structResultItem} from "@/api/reportCom/type";

//data
let props = defineProps<{
  list?: structResultItem[]
}>()
let systemStore = useSystemStore()
let reportStore = useReportStore()
let emit = defineEmits(['handleClick'])
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const handleClick = (item: structResultItem) => { 
  emit('handleClick', item)
}
</script>

<script lang="ts">
export default {
  name: 'rpRightMenuItem'
}
</script>
<style scoped lang="scss">
.menuTitle {
  flex: 1;
}

.circle {
  width: 8px;
  height: 8px;
  background-color: #101010;
  border-radius: 50%;
}

</style>

